<template>
<div>
    <div id="header">
        <img id="logo" src="~@/assets/logo.png" @click="jump('index')" alt="electron-vue">
        <div class="menu">
            <el-menu v-if="menu" :style="{marginRight:'16px;'}" v-for="(page , index) in menuList" :default-active="acindex" class="el-menu" mode="horizontal">
                <el-menu-item :index="`${index + 1}`"><router-link  :to="page.router" >{{page.name}}</router-link></el-menu-item>
            </el-menu>
            <el-select  placeholder="版本" v-model="version" :style="{width:'100px','margin':'0 16px'}">
                <el-option label="1.0.0" value="1.0.0"></el-option>
            </el-select>
            <p v-if="!menu">本系统采用electron制作</p>
        </div>
    </div>
</div>
</template>

<script>
  export default {
    props: {
      menu: Boolean, // 是否显示菜单跳转
      menuList: {
        type: Array,
        default: () => []
      }
    },
    data () {
      return {
        version: '1.0.0',
        pageList: []
      }
    },
    name: 'header-nav',
    mounted () {

    },
    computed: {
      acindex: {
        get: function () {
          let index = '1'
          this.menuList.forEach((list, i) => {
            if (list.router === this.$router.currentRoute.name) index = `${i + 1}`
          })
          return index
        },
        set: function (v) {
  
        }
      }
    },
    methods: {
      open (link) {
        this.$electron.shell.openExternal(link)
      },
      jump (link) {
        this.$router.push(`${link}`)
      }
    }
  }
</script>

<style scoped lang="less">
#header{
    width:100%;
    height:80px;
    background: #fff;
    margin-bottom: 8px;
    box-shadow: 0 2px 4px rgba(0,0,0,.2);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding:0 16px;
    #logo{
        height:60px;
        cursor: pointer;
    }
    .menu{
        width:calc(100% - 180px);
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    p{
        font-size:16px;
    }
}
</style>
